<template>
  <div class="quality-assurance-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>教学质量保障中心</h1>
      <p>全方位监控教学质量，确保用户获得最佳训练体验</p>
    </div>

    <!-- 功能导航 -->
    <div class="function-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab-button', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        <span class="tab-icon">{{ tab.icon }}</span>
        <span>{{ tab.name }}</span>
      </button>
    </div>

    <!-- 课后评价系统 -->
    <div v-if="activeTab === 'evaluation'" class="tab-content">
      <div class="section-header">
        <h2>课后评价系统</h2>
        <p>多维度评价体系，确保教学质量持续提升</p>
      </div>

      <!-- 评价统计概览 -->
      <div class="evaluation-overview">
        <div class="overview-card">
          <div class="card-icon">📊</div>
          <div class="card-content">
            <h3>总评价数</h3>
            <div class="card-value">15,234</div>
            <div class="card-trend">+12.5% 本月</div>
          </div>
        </div>
        <div class="overview-card">
          <div class="card-icon">⭐</div>
          <div class="card-content">
            <h3>平均评分</h3>
            <div class="card-value">4.6/5.0</div>
            <div class="card-trend">+0.2 本月</div>
          </div>
        </div>
        <div class="overview-card">
          <div class="card-icon">👍</div>
          <div class="card-content">
            <h3>满意度</h3>
            <div class="card-value">92.3%</div>
            <div class="card-trend">+3.1% 本月</div>
          </div>
        </div>
        <div class="overview-card">
          <div class="card-icon">📝</div>
          <div class="card-content">
            <h3>评价率</h3>
            <div class="card-value">87.6%</div>
            <div class="card-trend">+1.8% 本月</div>
          </div>
        </div>
      </div>

      <!-- 评价维度分析 -->
      <div class="evaluation-dimensions">
        <h3>评价维度分析</h3>
        <div class="dimensions-grid">
          <div v-for="dimension in evaluationDimensions" :key="dimension.id" class="dimension-card">
            <div class="dimension-header">
              <span class="dimension-name">{{ dimension.name }}</span>
              <span class="dimension-score">{{ dimension.score }}/5.0</span>
            </div>
            <div class="dimension-bar">
              <div class="dimension-fill" :style="{ width: (dimension.score / 5 * 100) + '%' }"></div>
            </div>
            <div class="dimension-details">
              <div class="detail-item">
                <span>优秀率:</span>
                <span>{{ dimension.excellentRate }}%</span>
              </div>
              <div class="detail-item">
                <span>改进空间:</span>
                <span>{{ dimension.improvementArea }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新评价 -->
      <div class="recent-evaluations">
        <h3>最新评价</h3>
        <div class="evaluations-list">
          <div v-for="evaluation in recentEvaluations" :key="evaluation.id" class="evaluation-item">
            <div class="evaluation-header">
              <div class="user-info">
                <img :src="evaluation.userAvatar" :alt="evaluation.userName" class="user-avatar">
                <div class="user-details">
                  <div class="user-name">{{ evaluation.userName }}</div>
                  <div class="evaluation-date">{{ evaluation.date }}</div>
                </div>
              </div>
              <div class="evaluation-rating">
                <div class="stars">
                  <span v-for="i in 5" :key="i" 
                        :class="['star', { filled: i <= evaluation.rating }]">★</span>
                </div>
                <span class="rating-text">{{ evaluation.rating }}/5</span>
              </div>
            </div>
            <div class="trainer-info">
              <span>私教：{{ evaluation.trainerName }}</span>
              <span class="course-type">{{ evaluation.courseType }}</span>
            </div>
            <div class="evaluation-content">{{ evaluation.content }}</div>
            <div class="evaluation-tags">
              <span v-for="tag in evaluation.tags" :key="tag" class="tag">{{ tag }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 训练效果追踪 -->
    <div v-if="activeTab === 'tracking'" class="tab-content">
      <div class="section-header">
        <h2>训练效果追踪</h2>
        <p>科学记录训练数据，量化健身成果</p>
      </div>

      <!-- 效果追踪工具 -->
      <div class="tracking-tools">
        <div class="tool-card">
          <div class="tool-icon">📏</div>
          <h3>体测数据记录</h3>
          <p>记录身高、体重、体脂率、肌肉量等关键指标</p>
          <button class="tool-button" @click="showBodyDataModal = true">录入数据</button>
        </div>
        <div class="tool-card">
          <div class="tool-icon">💪</div>
          <h3>训练记录</h3>
          <p>详细记录每次训练的项目、强度、时长等信息</p>
          <button class="tool-button" @click="showTrainingModal = true">添加记录</button>
        </div>
        <div class="tool-card">
          <div class="tool-icon">🎯</div>
          <h3>目标设定</h3>
          <p>设定阶段性健身目标，跟踪完成进度</p>
          <button class="tool-button" @click="showGoalModal = true">设定目标</button>
        </div>
        <div class="tool-card">
          <div class="tool-icon">📊</div>
          <h3>进度报告</h3>
          <p>生成个性化的训练效果分析报告</p>
          <button class="tool-button" @click="generateReport">生成报告</button>
        </div>
      </div>

      <!-- 训练数据图表 -->
      <div class="tracking-charts">
        <div class="chart-container">
          <h3>体重变化趋势</h3>
          <div class="chart-placeholder">
            <svg viewBox="0 0 400 200" class="progress-chart">
              <polyline 
                points="20,180 60,170 100,160 140,150 180,140 220,130 260,125 300,120 340,115 380,110"
                fill="none" 
                stroke="#3498db" 
                stroke-width="3"/>
              <circle cx="380" cy="110" r="4" fill="#3498db"/>
              <text x="390" y="115" font-size="12" fill="#3498db">65.2kg</text>
            </svg>
          </div>
        </div>
        <div class="chart-container">
          <h3>体脂率变化</h3>
          <div class="chart-placeholder">
            <svg viewBox="0 0 400 200" class="progress-chart">
              <polyline 
                points="20,160 60,155 100,150 140,145 180,135 220,125 260,115 300,105 340,95 380,85"
                fill="none" 
                stroke="#e74c3c" 
                stroke-width="3"/>
              <circle cx="380" cy="85" r="4" fill="#e74c3c"/>
              <text x="390" y="90" font-size="12" fill="#e74c3c">18.5%</text>
            </svg>
          </div>
        </div>
      </div>

      <!-- 训练成就 -->
      <div class="achievements">
        <h3>训练成就</h3>
        <div class="achievements-grid">
          <div v-for="achievement in achievements" :key="achievement.id" 
               :class="['achievement-card', { unlocked: achievement.unlocked }]">
            <div class="achievement-icon">{{ achievement.icon }}</div>
            <div class="achievement-content">
              <h4>{{ achievement.title }}</h4>
              <p>{{ achievement.description }}</p>
              <div class="achievement-progress">
                <div class="progress-bar">
                  <div class="progress-fill" 
                       :style="{ width: achievement.progress + '%' }"></div>
                </div>
                <span class="progress-text">{{ achievement.progress }}%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 质量监控 -->
    <div v-if="activeTab === 'monitoring'" class="tab-content">
      <div class="section-header">
        <h2>质量监控中心</h2>
        <p>实时监控平台教学质量，及时发现和解决问题</p>
      </div>

      <!-- 质量指标仪表板 -->
      <div class="quality-dashboard">
        <div class="quality-metric">
          <div class="metric-icon">🎯</div>
          <div class="metric-content">
            <h3>整体质量评分</h3>
            <div class="metric-value">4.6/5.0</div>
            <div class="metric-status good">优秀</div>
          </div>
        </div>
        <div class="quality-metric">
          <div class="metric-icon">⚠️</div>
          <div class="metric-content">
            <h3>待处理投诉</h3>
            <div class="metric-value">3</div>
            <div class="metric-status warning">需关注</div>
          </div>
        </div>
        <div class="quality-metric">
          <div class="metric-icon">📈</div>
          <div class="metric-content">
            <h3>质量改善率</h3>
            <div class="metric-value">+8.2%</div>
            <div class="metric-status good">上升</div>
          </div>
        </div>
        <div class="quality-metric">
          <div class="metric-icon">🔍</div>
          <div class="metric-content">
            <h3>审核通过率</h3>
            <div class="metric-value">94.7%</div>
            <div class="metric-status good">正常</div>
          </div>
        </div>
      </div>

      <!-- 问题预警 -->
      <div class="quality-alerts">
        <h3>质量预警</h3>
        <div class="alerts-list">
          <div v-for="alert in qualityAlerts" :key="alert.id" 
               :class="['alert-item', alert.severity]">
            <div class="alert-icon">{{ alert.icon }}</div>
            <div class="alert-content">
              <div class="alert-title">{{ alert.title }}</div>
              <div class="alert-description">{{ alert.description }}</div>
              <div class="alert-time">{{ alert.time }}</div>
            </div>
            <div class="alert-actions">
              <button class="action-button primary">处理</button>
              <button class="action-button secondary">忽略</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 私教质量排行 -->
      <div class="trainer-ranking">
        <h3>私教质量排行</h3>
        <div class="ranking-list">
          <div v-for="(trainer, index) in trainerRanking" :key="trainer.id" class="ranking-item">
            <div class="rank-number" :class="getRankClass(index + 1)">{{ index + 1 }}</div>
            <img :src="trainer.avatar" :alt="trainer.name" class="trainer-avatar">
            <div class="trainer-info">
              <div class="trainer-name">{{ trainer.name }}</div>
              <div class="trainer-specialty">{{ trainer.specialty }}</div>
            </div>
            <div class="trainer-metrics">
              <div class="metric">
                <span class="metric-label">评分</span>
                <span class="metric-value">{{ trainer.rating }}</span>
              </div>
              <div class="metric">
                <span class="metric-label">完课率</span>
                <span class="metric-value">{{ trainer.completionRate }}%</span>
              </div>
              <div class="metric">
                <span class="metric-label">满意度</span>
                <span class="metric-value">{{ trainer.satisfaction }}%</span>
              </div>
            </div>
            <div class="quality-badge" :class="trainer.qualityLevel">
              {{ getQualityText(trainer.qualityLevel) }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 体测数据录入模态框 -->
    <div v-if="showBodyDataModal" class="modal-overlay" @click="showBodyDataModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>录入体测数据</h3>
          <button class="close-button" @click="showBodyDataModal = false">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitBodyData">
            <div class="form-row">
              <div class="form-group">
                <label>体重 (kg)</label>
                <input type="number" v-model="bodyData.weight" step="0.1" required>
              </div>
              <div class="form-group">
                <label>体脂率 (%)</label>
                <input type="number" v-model="bodyData.bodyFat" step="0.1" required>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>肌肉量 (kg)</label>
                <input type="number" v-model="bodyData.muscle" step="0.1" required>
              </div>
              <div class="form-group">
                <label>基础代谢 (kcal)</label>
                <input type="number" v-model="bodyData.bmr" required>
              </div>
            </div>
            <div class="form-group">
              <label>备注</label>
              <textarea v-model="bodyData.notes" rows="3"></textarea>
            </div>
            <div class="form-actions">
              <button type="button" @click="showBodyDataModal = false">取消</button>
              <button type="submit" class="primary">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 训练记录模态框 -->
    <div v-if="showTrainingModal" class="modal-overlay" @click="showTrainingModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>添加训练记录</h3>
          <button class="close-button" @click="showTrainingModal = false">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitTrainingRecord">
            <div class="form-group">
              <label>训练项目</label>
              <select v-model="trainingRecord.exercise" required>
                <option value="">请选择训练项目</option>
                <option value="chest">胸部训练</option>
                <option value="back">背部训练</option>
                <option value="legs">腿部训练</option>
                <option value="shoulders">肩部训练</option>
                <option value="arms">手臂训练</option>
                <option value="cardio">有氧训练</option>
              </select>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>训练时长 (分钟)</label>
                <input type="number" v-model="trainingRecord.duration" required>
              </div>
              <div class="form-group">
                <label>强度等级</label>
                <select v-model="trainingRecord.intensity" required>
                  <option value="low">低强度</option>
                  <option value="medium">中强度</option>
                  <option value="high">高强度</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label>训练感受</label>
              <textarea v-model="trainingRecord.feeling" rows="3" placeholder="记录训练后的感受..."></textarea>
            </div>
            <div class="form-actions">
              <button type="button" @click="showTrainingModal = false">取消</button>
              <button type="submit" class="primary">保存</button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 目标设定模态框 -->
    <div v-if="showGoalModal" class="modal-overlay" @click="showGoalModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>设定健身目标</h3>
          <button class="close-button" @click="showGoalModal = false">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="submitGoal">
            <div class="form-group">
              <label>目标类型</label>
              <select v-model="goal.type" required>
                <option value="">请选择目标类型</option>
                <option value="weight-loss">减重</option>
                <option value="muscle-gain">增肌</option>
                <option value="strength">力量提升</option>
                <option value="endurance">耐力提升</option>
                <option value="body-fat">体脂降低</option>
              </select>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>目标数值</label>
                <input type="number" v-model="goal.targetValue" step="0.1" required>
              </div>
              <div class="form-group">
                <label>目标期限</label>
                <input type="date" v-model="goal.deadline" required>
              </div>
            </div>
            <div class="form-group">
              <label>目标描述</label>
              <textarea v-model="goal.description" rows="3" placeholder="详细描述你的健身目标..."></textarea>
            </div>
            <div class="form-actions">
              <button type="button" @click="showGoalModal = false">取消</button>
              <button type="submit" class="primary">设定目标</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualityAssuranceView',
  data() {
    return {
      activeTab: 'evaluation',
      showBodyDataModal: false,
      showTrainingModal: false,
      showGoalModal: false,
      
      tabs: [
        { id: 'evaluation', name: '课后评价', icon: '⭐' },
        { id: 'tracking', name: '效果追踪', icon: '📊' },
        { id: 'monitoring', name: '质量监控', icon: '🔍' }
      ],
      
      evaluationDimensions: [
        {
          id: 1,
          name: '技术专业性',
          score: 4.7,
          excellentRate: 89,
          improvementArea: '动作纠正'
        },
        {
          id: 2,
          name: '沟通能力',
          score: 4.5,
          excellentRate: 82,
          improvementArea: '耐心指导'
        },
        {
          id: 3,
          name: '教学效果',
          score: 4.6,
          excellentRate: 85,
          improvementArea: '个性化方案'
        },
        {
          id: 4,
          name: '服务态度',
          score: 4.8,
          excellentRate: 92,
          improvementArea: '时间管理'
        },
        {
          id: 5,
          name: '课程安排',
          score: 4.4,
          excellentRate: 78,
          improvementArea: '难度递进'
        },
        {
          id: 6,
          name: '安全保障',
          score: 4.9,
          excellentRate: 96,
          improvementArea: '设备检查'
        }
      ],
      
      recentEvaluations: [
        {
          id: 1,
          userName: '张小明',
          userAvatar: 'https://via.placeholder.com/40',
          trainerName: '李教练',
          courseType: '力量训练',
          rating: 5,
          date: '2024-01-15',
          content: '李教练非常专业，动作指导很到位，训练效果明显。课程安排合理，强度适中，非常满意！',
          tags: ['专业', '耐心', '效果好']
        },
        {
          id: 2,
          userName: '王小红',
          userAvatar: 'https://via.placeholder.com/40',
          trainerName: '陈教练',
          courseType: '减脂训练',
          rating: 4,
          date: '2024-01-14',
          content: '陈教练很负责，会根据我的身体状况调整训练计划。希望能在饮食指导方面更详细一些。',
          tags: ['负责', '个性化', '需改进']
        },
        {
          id: 3,
          userName: '刘小强',
          userAvatar: 'https://via.placeholder.com/40',
          trainerName: '赵教练',
          courseType: '功能性训练',
          rating: 5,
          date: '2024-01-13',
          content: '赵教练的课程设计很科学，不仅锻炼了肌肉，还提高了身体协调性。推荐！',
          tags: ['科学', '全面', '推荐']
        }
      ],
      
      achievements: [
        {
          id: 1,
          title: '坚持不懈',
          description: '连续训练30天',
          icon: '🔥',
          progress: 100,
          unlocked: true
        },
        {
          id: 2,
          title: '力量之王',
          description: '深蹲重量达到体重1.5倍',
          icon: '💪',
          progress: 85,
          unlocked: false
        },
        {
          id: 3,
          title: '减脂达人',
          description: '体脂率降低5%',
          icon: '🎯',
          progress: 60,
          unlocked: false
        },
        {
          id: 4,
          title: '马拉松挑战',
          description: '完成10公里跑步',
          icon: '🏃',
          progress: 40,
          unlocked: false
        }
      ],
      
      qualityAlerts: [
        {
          id: 1,
          title: '用户投诉',
          description: '用户反映李教练迟到问题',
          severity: 'high',
          icon: '🚨',
          time: '2小时前'
        },
        {
          id: 2,
          title: '评分下降',
          description: '张教练本周评分低于4.0',
          severity: 'medium',
          icon: '⚠️',
          time: '1天前'
        },
        {
          id: 3,
          title: '课程取消率高',
          description: '王教练近期课程取消率超过10%',
          severity: 'low',
          icon: '📊',
          time: '3天前'
        }
      ],
      
      trainerRanking: [
        {
          id: 1,
          name: '李强',
          avatar: 'https://via.placeholder.com/50',
          specialty: '力量训练',
          rating: 4.9,
          completionRate: 98,
          satisfaction: 96,
          qualityLevel: 'platinum'
        },
        {
          id: 2,
          name: '张美丽',
          avatar: 'https://via.placeholder.com/50',
          specialty: '瑜伽普拉提',
          rating: 4.8,
          completionRate: 95,
          satisfaction: 94,
          qualityLevel: 'gold'
        },
        {
          id: 3,
          name: '王健',
          avatar: 'https://via.placeholder.com/50',
          specialty: '减脂训练',
          rating: 4.7,
          completionRate: 92,
          satisfaction: 91,
          qualityLevel: 'gold'
        },
        {
          id: 4,
          name: '陈小明',
          avatar: 'https://via.placeholder.com/50',
          specialty: '功能性训练',
          rating: 4.6,
          completionRate: 90,
          satisfaction: 88,
          qualityLevel: 'silver'
        },
        {
          id: 5,
          name: '刘教练',
          avatar: 'https://via.placeholder.com/50',
          specialty: '康复训练',
          rating: 4.5,
          completionRate: 87,
          satisfaction: 85,
          qualityLevel: 'silver'
        }
      ],
      
      bodyData: {
        weight: '',
        bodyFat: '',
        muscle: '',
        bmr: '',
        notes: ''
      },
      
      trainingRecord: {
        exercise: '',
        duration: '',
        intensity: '',
        feeling: ''
      },
      
      goal: {
        type: '',
        targetValue: '',
        deadline: '',
        description: ''
      }
    }
  },
  
  methods: {
    getRankClass(rank) {
      if (rank === 1) return 'first';
      if (rank === 2) return 'second';
      if (rank === 3) return 'third';
      return '';
    },
    
    getQualityText(level) {
      const levelMap = {
        platinum: '白金',
        gold: '黄金',
        silver: '白银',
        bronze: '青铜'
      };
      return levelMap[level] || level;
    },
    
    submitBodyData() {
      console.log('提交体测数据:', this.bodyData);
      this.showBodyDataModal = false;
      // 重置表单
      this.bodyData = {
        weight: '',
        bodyFat: '',
        muscle: '',
        bmr: '',
        notes: ''
      };
    },
    
    submitTrainingRecord() {
      console.log('提交训练记录:', this.trainingRecord);
      this.showTrainingModal = false;
      // 重置表单
      this.trainingRecord = {
        exercise: '',
        duration: '',
        intensity: '',
        feeling: ''
      };
    },
    
    submitGoal() {
      console.log('设定目标:', this.goal);
      this.showGoalModal = false;
      // 重置表单
      this.goal = {
        type: '',
        targetValue: '',
        deadline: '',
        description: ''
      };
    },
    
    generateReport() {
      console.log('生成进度报告');
      alert('正在生成您的个性化训练效果报告...');
    }
  }
}
</script>

<style scoped>
.quality-assurance-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 32px;
}

.page-header p {
  color: #7f8c8d;
  font-size: 16px;
}

.function-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  border-bottom: 2px solid #ecf0f1;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 25px;
  border: none;
  background: none;
  color: #7f8c8d;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #3498db;
}

.tab-button.active {
  color: #3498db;
  border-bottom-color: #3498db;
}

.tab-icon {
  font-size: 20px;
}

.tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-header h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.section-header p {
  color: #7f8c8d;
}

.evaluation-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
}

.card-content h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.card-value {
  color: #2c3e50;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-trend {
  color: #27ae60;
  font-size: 14px;
  font-weight: bold;
}

.evaluation-dimensions {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.evaluation-dimensions h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.dimension-card {
  padding: 20px;
  border: 1px solid #ecf0f1;
  border-radius: 8px;
}

.dimension-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dimension-name {
  font-weight: bold;
  color: #2c3e50;
}

.dimension-score {
  color: #3498db;
  font-weight: bold;
}

.dimension-bar {
  height: 8px;
  background: #ecf0f1;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}

.dimension-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.dimension-details {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-item span:first-child {
  color: #7f8c8d;
}

.detail-item span:last-child {
  color: #2c3e50;
  font-weight: bold;
}

.recent-evaluations {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.recent-evaluations h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.evaluations-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.evaluation-item {
  padding: 20px;
  border: 1px solid #ecf0f1;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.evaluation-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.evaluation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-name {
  font-weight: bold;
  color: #2c3e50;
}

.evaluation-date {
  color: #7f8c8d;
  font-size: 14px;
}

.evaluation-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: #ddd;
  font-size: 16px;
}

.star.filled {
  color: #f39c12;
}

.rating-text {
  color: #7f8c8d;
  font-size: 14px;
}

.trainer-info {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #7f8c8d;
}

.course-type {
  background: #e3f2fd;
  color: #1976d2;
  padding: 2px 8px;
  border-radius: 12px;
}

.evaluation-content {
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

.evaluation-tags {
  display: flex;
  gap: 8px;
}

.tag {
  background: #f8f9fa;
  color: #495057;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.tracking-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.tool-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.tool-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.tool-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.tool-card p {
  color: #7f8c8d;
  margin-bottom: 20px;
  line-height: 1.5;
}

.tool-button {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.tool-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tracking-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.chart-container h3 {
  color: #2c3e50;
  margin-bottom: 20px;
  text-align: center;
}

.chart-placeholder {
  height: 200px;
}

.progress-chart {
  width: 100%;
  height: 100%;
}

.achievements {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.achievements h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.achievement-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 2px solid #ecf0f1;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.achievement-card.unlocked {
  border-color: #f39c12;
  background: linear-gradient(135deg, #fff9e6, #fff);
}

.achievement-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 50%;
}

.achievement-card.unlocked .achievement-icon {
  background: linear-gradient(135deg, #f39c12, #e67e22);
}

.achievement-content {
  flex: 1;
}

.achievement-content h4 {
  color: #2c3e50;
  margin: 0 0 5px 0;
}

.achievement-content p {
  color: #7f8c8d;
  margin: 0 0 10px 0;
  font-size: 14px;
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #ecf0f1;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 12px;
  color: #7f8c8d;
}

.quality-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.quality-metric {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.metric-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
}

.metric-content h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.metric-value {
  color: #2c3e50;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.metric-status.good {
  background: #d4edda;
  color: #155724;
}

.metric-status.warning {
  background: #fff3cd;
  color: #856404;
}

.quality-alerts {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.quality-alerts h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid;
}

.alert-item.high {
  background: #fff5f5;
  border-left-color: #e53e3e;
}

.alert-item.medium {
  background: #fffbf0;
  border-left-color: #dd6b20;
}

.alert-item.low {
  background: #f0fff4;
  border-left-color: #38a169;
}

.alert-icon {
  font-size: 24px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.alert-description {
  color: #555;
  margin-bottom: 5px;
}

.alert-time {
  color: #7f8c8d;
  font-size: 12px;
}

.alert-actions {
  display: flex;
  gap: 10px;
}

.action-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.action-button.primary {
  background: #3498db;
  color: white;
}

.action-button.secondary {
  background: #ecf0f1;
  color: #7f8c8d;
}

.action-button:hover {
  transform: translateY(-1px);
}

.trainer-ranking {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.trainer-ranking h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid #ecf0f1;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.ranking-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.rank-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  color: white;
  background: #95a5a6;
}

.rank-number.first {
  background: linear-gradient(135deg, #f1c40f, #f39c12);
}

.rank-number.second {
  background: linear-gradient(135deg, #bdc3c7, #95a5a6);
}

.rank-number.third {
  background: linear-gradient(135deg, #e67e22, #d35400);
}

.trainer-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.trainer-info {
  flex: 1;
}

.trainer-name {
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.trainer-specialty {
  color: #7f8c8d;
  font-size: 14px;
}

.trainer-metrics {
  display: flex;
  gap: 20px;
}

.metric {
  text-align: center;
}

.metric-label {
  display: block;
  color: #7f8c8d;
  font-size: 12px;
  margin-bottom: 2px;
}

.metric-value {
  color: #2c3e50;
  font-weight: bold;
  font-size: 14px;
}

.quality-badge {
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.quality-badge.platinum {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.quality-badge.gold {
  background: linear-gradient(135deg, #f1c40f, #f39c12);
  color: white;
}

.quality-badge.silver {
  background: linear-gradient(135deg, #bdc3c7, #95a5a6);
  color: white;
}

.quality-badge.bronze {
  background: linear-gradient(135deg, #e67e22, #d35400);
  color: white;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #ecf0f1;
}

.modal-header h3 {
  color: #2c3e50;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #7f8c8d;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  padding: 25px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #2c3e50;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.form-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-actions button[type="button"] {
  background: #ecf0f1;
  color: #7f8c8d;
}

.form-actions button.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.form-actions button:hover {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .quality-assurance-container {
    padding: 15px;
  }
  
  .function-tabs {
    flex-direction: column;
    gap: 10px;
  }
  
  .evaluation-overview {
    grid-template-columns: 1fr;
  }
  
  .dimensions-grid {
    grid-template-columns: 1fr;
  }
  
  .tracking-tools {
    grid-template-columns: 1fr;
  }
  
  .tracking-charts {
    grid-template-columns: 1fr;
  }
  
  .achievements-grid {
    grid-template-columns: 1fr;
  }
  
  .quality-dashboard {
    grid-template-columns: 1fr;
  }
  
  .trainer-metrics {
    flex-direction: column;
    gap: 10px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
}
</style>